<template>
  <div>
    <common-head :title="title"/>
    <div class="wrap">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in pics" :key="banner.id">
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <h4>{{basicInfo.name}}</h4>
      <div class="content" v-html="content"></div>
    </div>
      <!-- 商品行动栏 -->
    <van-goods-action>
        <van-goods-action-icon icon="wap-home-o" text="首页" @click="$router.push('/home')" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
        <van-goods-action-button
          type="danger"
          text="加入购物车"
          @click="clickItemBtn"
        />
      </van-goods-action>
      <!-- 商品行动栏 -->
      <!-- 弹出商品规格 -->
      <van-popup v-model="showSku" closeable round position="bottom" :style="{ height: '35%' }">
        <van-card
          :num="sku.number"
          :price="sku.minPrice"
          :title="sku.name"
          :thumb="sku.pic"
        >
          <template #footer>
            <van-stepper v-model="sku.number"/>
            <van-button size="large" round style="margin-top:5px" color="#ff734c">确定</van-button>
          </template>
        </van-card>
      </van-popup>
      <!-- /弹出商品规格 -->
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItemDetail } from '_api'
export default {
  data () {
    return {
      title: '详情页',
      basicInfo: {},
      pics: [],
      content: '',
      showSku: false,
      sku: {
      }
    }
  },
  created () {
    this.fetchDeatil()
  },
  methods: {
    clickItemBtn () {
      // 点击加入购物车按钮
      this.showSku = true
    },
    fetchDeatil () {
      fetchItemDetail(this.$route.query.id).then(res => {
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.sku = {
            number: 1,
            ...this.basicInfo
          }
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width:100%"')
        }
      })
    }
  },
  components: { CommonHead }

}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 46px;
  padding-bottom: 50px;
  .my-swipe{
    width: 10rem;
    height: 5rem;
    img{
      width: 10rem;
      height: 5rem;
    }
  }
  /* .content{
    /deep/ img{
      display: block;
      width: 100%;
    }
  } */
}
/deep/ .van-popup{
  background-color: #fafafa;
}
</style>
